<template>
	<view class="page" >
		<view class="allwrap flexcolumnalign">
			<view class="frame-logo flexcenter">
				logo
			</view>
			<view class="frame-title">登录XXX</view>
			
			<view class="flexal" style="margin-top: 38rpx;">
			<view class="frame-icon flexcen">
				<image src="../../../static/login/name.png" class="icon"></image>
			</view>
			<u-input v-model="value" :type="type" placeholder="请输入您的名称"  :custom-style="customStyle" :border="border" />
			</view>
			<view class="flexal" style="margin-top: 38rpx;">
			<view class="frame-icon flexcen">
				<image src="../../../static/login/number.png" class="icon"></image>
			</view>
			<u-input v-model="value" :type="type" placeholder="请输入您的工号"  :custom-style="customStyle" :border="border" />
			</view>
			<view class="flexal" style="margin-top: 38rpx;">
			<view class="frame-icon flexcen">
				<image src="../../../static/login/tel.png" class="icon"></image>
			</view>
			<u-input v-model="value" :type="type" placeholder="请输入您的手机号"  :custom-style="customStyle" :border="border" />
			</view>
			<view class="flexal" style="margin-top: 38rpx;">
			<view class="frame-icon flexcen">
				<image src="../../../static/login/pass.png" class="icon"></image>
			</view>
			<u-input v-model="value" :type="type" placeholder="请输入您的密码"  :custom-style="customStyle" :border="border" />
			</view>
			
			<view class="frame-forget" @click="show = !show" >忘记密码？</view>
			
			<button class="frame-button flexcen" @click="login" >登录</button>
			
			<u-checkbox @change="checkboxChange" v-model="checked" style="margin-top: 34rpx;">
				<text class="frame-text">我已阅读并同意《用户协议》和《隐私政策》</text> 
				</u-checkbox>
			
			
			<u-popup mode="center" v-model="show" :border-radius="24">
						<view class="content flexcolumnalign">
							<text style="margin-top: 32rpx;">忘记密码？</text>
							<text style="margin-top: 40rpx;">请联系管理员重置密码</text>
							<u-line color="#707070" class="u-line" length="622" margin="36rpx 0rpx 0rpx 0rpx" />
							<view class="confrim-btn" @click="show = false">我知道了</view>
						</view>
			</u-popup>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import {
		setToken
	} from '@/common/auth.js'
	export default {
		data() {
			return {
				value:'',
				border:false,
				type:'text',
				show:false,
				customStyle:{
					'width': '524rpx',
					'height': '98rpx',
					'background': '#F1F1F1',
					'border-radius': '0rpx 16rpx 16rpx 0rpx'
					// 'padding-left':'98rpx'
				},
				checked:false								//隐私政策
			}
		},
		onLoad() {
			
		},
		methods: {
			// 点击隐私政策
			checkboxChange(e){
				console.log('我被选中',e)
			},
			// 登录事件
			login(e){
				if(!this.checked){
					this.$refs.uToast.show({
						title: '请勾选用户协议和隐私政策',
						type: 'default'
					})
					return
				}
				setToken('123');
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
				})
				setTimeout(function() {
				  uni.switchTab({
				  	url: '/pages/index/index'
				  });
				}, 1000); // 这里的 1000 表示延时的时间，单位是毫秒
				
			}
		},

	}
</script>

<style lang="less">
	
	page>view{
		background: #FFFFFF !important;
	}
	.frame-logo{
		margin-top: 198rpx;
		width: 149rpx;
		height: 149rpx;
		background: #FFFFFF;
		border-radius: 75rpx 75rpx 75rpx 75rpx;
		border: 50%;
		border: 2px solid black; /* 2px宽的黑色实线边框 */
		font-weight: 500;
		font-size: 46rpx;
		color: #0052D9;
	}
	.frame-text{
		font-weight: 400;
		font-size: 24rpx;
		color: #606060;
	}
	.frame-title{
		margin-top: 24rpx;
		font-weight: 500;
		font-size: 46rpx;
		color: #000000;
		margin-bottom: 35rpx;
	}
	.frame-icon{
		width: 98rpx;
		height: 98rpx;
		background: #F1F1F1;
		border-radius: 16rpx 0rpx 0rpx 16rpx;
	}
	.icon{
		width: 44rpx;
		height: 45rpx;
	}
	.frame-forget{
		margin-top: 39rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	.frame-button{
		margin-top: 48rpx;
		width: 622rpx;
		height: 89rpx;
		background: #0052D9;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.content{
		width: 686rpx;
		height: 284rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	
	.confrim-btn{
		margin-top: 31rpx;
		color: #0052D9;
		font-weight: 400;
		font-size: 30rpx;
	}
	.u-line{
		width: 622rpx;
		height: 0rpx;
		border: 1rpx solid #707070;
		opacity: 0.17;
	}
</style>

